<script setup>
  import { reactive } from 'vue'
  import { RouterView } from 'vue-router'
  // 需要缓存的组件
  const keepCom = reactive({
    aliveCom:['Creation','Message','UserCenter']
  })

</script>

<template>
  <div class="box">
    <!-- 保存组件缓存 -->
    <router-view v-slot="{ Component }">
    <keep-alive :include="keepCom.aliveCom">
      <component :is="Component" />
    </keep-alive>
  </router-view>
  </div>
</template>

<style lang="less" scoped>

</style>

<style>
*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
a{
  text-decoration: none;
  color: #fff;
}
ul,
li {
  list-style: none;
}

body{
  background: linear-gradient(
    90deg,rgba(247,149,51,.1),
    rgba(243,112,85,.1) 15%,
    rgba(239,78,123,.1) 30%,
    rgba(161,102,171,.1) 44%,
    rgba(80,115,184,.1) 58%,
    rgba(16,152,173,.1) 72%,
    rgba(7,179,155,.1) 86%,
    rgba(109,186,130,.1));
}
::-webkit-scrollbar{
  width: 5px;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background-color: rgba(73, 177, 245, 0.2);
  border-radius: 2em;
}

::-webkit-scrollbar-thumb {
  background-color: #49b1f5;
  background-image: -webkit-linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.4) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0.4) 75%,
    transparent 75%,
    transparent
  );
  border-radius: 2em;
}

::-webkit-scrollbar-corner {
  background-color: transparent;
}
</style>
